<!DOCTYPE html>
<html lang="en">
<head>
    <th:block th:include="include :: header('系统日志')"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">模块名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title"  autocomplete="off" lay-affix="clear" placeholder="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">请求方式</label>
                    <div class="layui-input-inline">
                        <select name="requestMethod" lay-filter="requestMethod">
                            <option value=""></option>
                            <option th:each="type:${reqType}" th:title="${type}" th:text="${type}" ></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">响应状态</label>
                    <div class="layui-input-inline">
                        <select name="success" lay-filter="success">
                            <option value="" ></option>
                            <option value="1" >成功</option>
                            <option value="0" >失败</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="log-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
        <div class="layui-tab layui-tab-card" lay-filter="log-filter">
            <ul class="layui-tab-title">
                <li class="layui-this">登录日志</li>
                <li>操作日志</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table style="margin-top: 10px;" id="log-operate-table" lay-filter="log-operate-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="log-toolbar">
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        清空
    </button>
</script>
<script type="text/html" id="log-bar">
    {{#if (d.success == true) { }}
    <button class="pear-btn pear-btn-sm pear-btn-success " lay-event="edit"><i class="layui-icon layui-icon-ok"></i>
        成功</button>
    {{# }else if(d.success == false){ }}
    <button class="pear-btn pear-btn-sm pear-btn-danger" lay-event="error"><i class="layui-icon layui-icon-help"></i>
        异常</button>
    {{# } }}
</script>

<script type="text/html" id="log-createTime">
    {{layui.util.toDateString(d.createTime,  "yyyy-MM-dd HH:mm:ss")}}
</script>
<th:block th:include="include :: footer"/>
<script>
    let logType = "LOGIN"
    layui.use(['table','form','jquery','element'],function () {
        let table = layui.table;
        let form = layui.form;
        let element = layui.element;
        element.on('tab(log-filter)', function(data){
            if(data.index ===1 ){
                logType = "OPERATE"
            }
            table.reload('log-operate-table',{  where:{logType:logType}})
        });

        let cols = [
            [
                {title: '主键', field: 'id', align:'center'},
                {title: '模块', field: 'title', align:'center'},
                {title: '请求方式', field: 'requestMethod', align:'center'},
                {title: '接口', field: 'method', align:'center'},
                {title: '请求参数', field: 'requestParam', align:'left'},
                {title: '浏览器', field: 'browser', align:'center'},
                {title: '操作地址', field: 'operateAddress',align:'center'},
                {title: '操作系统', field: 'systemOs', align:'center'},
                {title: '访问时间', field: 'createTime',templet:'#log-createTime', align:'center'},
                {title: '操作人', field: 'operateName', align:'center'},
                {title: '访问状态', toolbar: '#log-bar', align:'center', width:150}
            ]
        ]

        table.render({
            elem: '#log-operate-table',
            url: '/system/log/list',
            page: true ,
            cols: cols ,
            skin: 'line',
            toolbar: '#log-toolbar',
            where:{logType:logType},
        });

        table.on('tool(log-operate-table)', function (obj) {
            if (obj.event === 'error') {
                window.error(obj);
            }
        });
        table.on('toolbar(log-operate-table)', function(obj){
            if(obj.event){
                window.batchRemove(obj)
            }
        })

        form.on('submit(log-query)', function(data){
            console.log(data.field)
            data.field.logType = logType
            console.log(data.field)
            table.reload('log-operate-table',{where:data.field})
            return false;
        });

        window.error = function(obj){
            console.log(obj)
            let errMsg = obj.data['errorMsg']
            let reqParam = obj.data['requestBody']
            let reqParamDetail = JSON.stringify(reqParam)
            let errorDetail = JSON.stringify(errMsg)
            errorDetail += "【请求参数】"+reqParamDetail
            layer.open({
                type: 1,
                title: '异常信息',
                shade: 0,
                area: ['550px', '500px'],
                content: `<div style="padding: 16px";>
                    <pre class="layui-code" lay-options="{theme: 'light',tools:['copy']}">${errorDetail}</pre>
                </div>`,
                success:function (layero, index, that){
                    layui.code({
                        elem:  layero.find('.layui-code')
                    });
                }
            });
        }
        window.batchRemove = function(obj){
            layer.confirm('该操作会删除所有日志，请谨慎操作', {icon: 3, title:'提示'}, function(index){
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: "/system/log/delete",
                    type:'post',
                    dataType:'json',
                    success:function(result){
                        layer.close(loading);
                        if(result.success){
                            layer.msg(result.message,{icon:1,time:1000},function(){
                            });
                            table.reload('log-operate-table');
                        }else{
                            layer.msg(result.message,{icon:2,time:1000});
                        }

                    }
                })
            });
        }
    })
</script>
<style >
    .layui-layer-content::-webkit-scrollbar {
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 5px;
    }
    .layui-layer-content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #E5E5E5;
    }
    .layui-layer-content::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #ffffff;
    }
</style>
</html>